<template>
  <div class="admin-web-site-navigation">
    <div>
      <a-button type="primary" size="small" @click="addBtnClick">
        添加
      </a-button>
    </div>
    <br>
    <a-collapse v-model="sectionValues">
      <a-collapse-panel v-for="section in dataArr" :key="section._id" :header="section._id">
        <a-tag
          v-for="item in section.arr"
          :key="item._id"
          color="blue"
          type="border"
          class="w-pointer"
          @click.self="itemClick(item)"
        >
          {{ item.title }}
          <a-icon type="close" @click="itemClose(item)" />
        </a-tag>
      </a-collapse-panel>
    </a-collapse>
    <w-add ref="WAdd" :sections="sections" @success="reloadData" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Admin, Api } from '@/config/api'
import WAdd, {
  AddSiteNavigationComType
} from '@/components/admin/web/siteNavigation/add'
import SiteNavigationModel from '@/models/siteNavigation'

const requestRule = () => {
  return [{ required: true, message: '请输入', trigger: 'blur' }]
}
const getList = ($wAxios: any) => {
  return $wAxios.$get(Api.siteNavigation.curd)
}

@Component({
  name: 'SiteNavigation',
  layout: 'admin',
  components: {
    WAdd
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const datas = await Promise.all([
      $wAxios.$get(Admin.siteNavigation.findSection),
      getList($wAxios)
    ])
    return { sections: datas[0], dataArr: datas[1] }
  }
})
export default class SiteNavigation extends Vue {
  sectionValues: Array<string> = [];
  dataArr!: Array<SiteNavigationModel>;

  mounted () {
    this.sectionValues = this.dataArr.map(section => section._id)
  }

  // 刷新数据
  reloadData () {
    getList(this.$wAxios).then((dataArr: Array<SiteNavigationModel>) => {
      this.dataArr = dataArr
    })
  }

  // 添加按钮点击
  addBtnClick () {
    (this.$refs.WAdd as AddSiteNavigationComType).show()
  }

  // 关闭按钮点击
  itemClose (item: SiteNavigationModel) {
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(`${Admin.siteNavigation.curd}/${item._id}`)
    }, item.title).then(() => {
      this.reloadData()
    })
  }

  itemClick (item: SiteNavigationModel) {
    (this.$refs.WAdd as AddSiteNavigationComType).show(item)
  }
}
</script>

<style scoped>
/*.admin-web-site-navigation {}*/
</style>
